{% extends 'base.html' %}
{% load static %}

{% block title %}兑换记录 - 本地有约{% endblock %}

{% block content %}
<div class="page-header">
    <div class="container">
        <h1><i class="fas fa-exchange-alt"></i> 兑换记录</h1>
        <p>查看您的商品兑换记录</p>
    </div>
</div>

<div class="container mb-5">
    <div class="row">
        <div class="col-lg-10 mx-auto">
            <div id="exchangesContainer">
                <div class="text-center py-5">
                    <div class="loader"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    function loadExchanges() {
        API.points.getExchanges()
            .then(response => {
                const exchanges = response.data.results || response.data;
                const container = document.getElementById('exchangesContainer');
                
                if (exchanges.length === 0) {
                    container.innerHTML = `
                        <div class="empty-state">
                            <i class="fas fa-shopping-bag"></i>
                            <h3>暂无兑换记录</h3>
                            <p>去积分商城看看吧</p>
                            <a href="{% url 'points:shop' %}" class="btn btn-gradient-primary">
                                <i class="fas fa-gift"></i> 前往商城
                            </a>
                        </div>
                    `;
                    return;
                }
                
                container.innerHTML = exchanges.map(exchange => {
                    const statusBadge = getExchangeStatusBadge(exchange.status);
                    
                    return `
                        <div class="card card-custom mb-3">
                            <div class="row g-0">
                                <div class="col-md-2">
                                    <img src="${exchange.product.image || '/static/img/default-product.jpg'}" 
                                         class="img-fluid h-100" 
                                         style="object-fit: cover;"
                                         alt="${exchange.product.name}">
                                </div>
                                <div class="col-md-10">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between align-items-start mb-2">
                                            <h5 class="mb-0">${exchange.product.name}</h5>
                                            <span class="badge ${statusBadge.class}">${statusBadge.text}</span>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-3">
                                                <small class="text-muted">消耗积分</small>
                                                <div class="fw-bold text-primary">${exchange.points_spent} 积分</div>
                                            </div>
                                            <div class="col-md-3">
                                                <small class="text-muted">兑换数量</small>
                                                <div class="fw-bold">${exchange.quantity}</div>
                                            </div>
                                            <div class="col-md-6">
                                                <small class="text-muted">兑换时间</small>
                                                <div class="fw-bold">${formatDate(exchange.created_at)}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                }).join('');
            })
            .catch(error => {
                console.error('加载失败:', error);
            });
    }
    
    function getExchangeStatusBadge(status) {
        const badges = {
            'pending': { text: '待发放', class: 'bg-warning' },
            'processing': { text: '处理中', class: 'bg-info' },
            'completed': { text: '已完成', class: 'bg-success' },
            'cancelled': { text: '已取消', class: 'bg-danger' },
        };
        return badges[status] || { text: '未知', class: 'bg-secondary' };
    }
    
    document.addEventListener('DOMContentLoaded', loadExchanges);
</script>
{% endblock %}
